<template>
  <div>
    <div :id="domId" style="height: 100%;width: 100%;position: absolute; "></div>
    <!-- 右下角操作栏 -->
    <zoomView v-model="currentZoom" 
      v-if="showZoom"
      :minZoom="minZoom" 
      :maxZoom="maxZoom" 
      @changeZoom="changeZoom" 
      @openType="changeOpenType"
      @changeMapType="changeMapType" 
      @locationQuery="locationQuery" />
      <!-- 地图定位弹出框 -->
      <PoiPopup v-if="showPopup" :popOption="popUpData" @onClose="(type)=>{popUpData.visible=type}" />
        <!-- 地图定位搜索框 -->
      <SearchPanel v-if="searchPanel" :top="searchTop" :left="searchLeft" @change="locationQuery" />
      <template v-for="item in landMarkList">
       <landMarkPopup v-if="item.visible" :popOption="item" @onClose="(type)=>{item.visible=type}" />
      </template>

  </div>
</template>

<script setup>
import {ref,reactive,onMounted,watch,toRaw} from "vue"
import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import Basemap from '@arcgis/core/Basemap.js';
import SpatialReference from '@arcgis/core/geometry/SpatialReference.js';
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import Point from '@arcgis/core/geometry/Point.js';
import Polyline from "@arcgis/core/geometry/Polyline.js";
import Polygon from '@arcgis/core/geometry/Polygon.js';
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel.js';
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";
import * as reactiveUtils from '@arcgis/core/core/reactiveUtils.js';
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine.js';
import Graphic from "@arcgis/core/Graphic"
import {googleImgLayer, googleVectorLayer, landImgLayer,tdtVecLayer,tdtImgLayer,tdtLabelLayer} from './mapURl'
import {WktToPolygon } from './utils/geoToWkt';
import zoomView from './components/zoom.vue';
import PoiPopup from './components/PoiPopup.vue';
import landMarkPopup from './components/landMarkPopup.vue';
import SearchPanel from './components/SearchPanel.vue';
import locationIcon from './images/location-icon.png'
import {getLocationInfo} from './outSide.js';

const props = defineProps({
  domId:{
    type:String,
    default(){
      return 'mapId'
    }
  },
  searchPanel:{
    type:Boolean,
    default:true
  },
  searchTop:{
    type:String,
    default:'10px'
  },
  searchLeft:{
    type:String,
    default:'20px'
  },
  showPopup:{
    type:Boolean,
    default:true
  },
  showZoom:{
    type:Boolean,
    default:true
  }
})
const emit = defineEmits(['update:modelValue','getLocation','init','pointerMove','zoom','click','extent'])
const spwkId = new SpatialReference({wkid: 4326});
const currentZoom = ref(5)
const maxZoom = ref(20)
const minZoom = ref(5)
const openPopUpType = ref(false)
const popUpData =ref({})
const drawEnable =ref(false)
const drwaPointList =ref([])
const landMarkList =ref([])
const oldLandMarkList =ref([])
let mapView = null
let tempLayer=null
let addLandMarktempLayer=null
let graphicsLayer =null
let drawProProcessLayer =null
let sketch=null
let extentTimer =null

onMounted(()=>{
      mapView = new MapView({
        container: props.domId,
        map: new Map({ basemap: new Basemap({ baseLayers: [tdtVecLayer, tdtImgLayer, landImgLayer,tdtLabelLayer]}) }), // 将地图对象关联到视图
        // center: [105.392939, 29.44738839333698],
        // zoom:currentZoom.value,
        extent: {
          xmin: 87.32036288883803,
          ymin: 21.19022964725648,
          xmax: 129.50794726335567,
          ymax: 41.64681352885853,
          spatialReference: spwkId
        },
        constraints: {
          maxZoom: maxZoom.value,
          minZoom: minZoom.value
        }
    })
    //移除所有样式
    mapView.ui.components = [];
    //监听放大缩小
    mapView.when(() => {
        reactiveUtils.watch(
          () => mapView['zoom'],
          (val) => {
            currentZoom.value = Number(val.toFixed(0));
            emit('zoom', currentZoom.value)
            // if(graphicsLayer){
            //    const graphics = graphicsLayer.graphics.items.filter(item => item.attributes.type == 'text')
  		      //   graphics.forEach(item => {item.visible = val > 16 ? true : false})
            // }
          }
        );
      });
   //点击获取定位
    mapView.on('click', (e) => {
      mapView.hitTest(e).then((e2) => {
        emit('click', e,e2)
        if(e2.results.length>0){
          e2.results.forEach(e3 => {
          let attrs = e3.graphic.attributes
          if(attrs?.id == 'click-pop-up') { // 判断是否点击了定位Icon
            popUpData.value.visible=true
          }
          if(attrs?.class == 'land-popup') { // 判断是否点击了地块
            locationQuery({
              longitude:attrs.locationLongitude,
              latitude:attrs.locationLatitude,
              ...attrs
            })
          }
        })
        }else{
         if(!openPopUpType.value){return}
            locationQuery({
              longitude:e.mapPoint.longitude,
              latitude:e.mapPoint.latitude
            })
        }
      })
      //地图描点画地块
      if(drawEnable.value){
        drwaPointList.value.push(e.mapPoint)
        drawAddVetexPro()
      }
    })

   mapView.on("pointer-move", (event) => {
        mapView.hitTest(event).then(res => {
            emit('pointerMove', event,res)
        })
    })
  //   //双击完成
  //  mapView.on('double-click', e => {
  //    if(drawEnable.value){
  //       drwaPointList.value.push(e.mapPoint)
  //        drawAddVetexPro()
  //        drawDonePro()
  //     }
  //   })
   
  //   //地图位置改变计算位置
  //   mapView.watch('extent', (e) => {
  //     const mapPoint = {
  //         x: Number(popUpData.value.mapX),
  //         y: Number(popUpData.value.mapY),
  //         spatialReference:spwkId
  //       };
  //       const { x, y } = mapView.toScreen(mapPoint)
  //       popUpData.value.screenX =x
  //       popUpData.value.screenY =y
  
  //   })
    emit('init', mapView)
})

//地图放大缩小
const changeZoom =(val)=>{
  mapView.zoom = val;
  currentZoom.value=val
}

//地图切换展示方式
const changeMapType =(type)=>{
  const baseLayers = mapView.map.basemap.baseLayers.items;
    baseLayers.forEach((layer) => {
      if (layer.id.indexOf(type) > -1) {
        layer.visible = true;
      } else {
        layer.visible = false;
      }
    });
}
//点击坐标点的弹出框数据
const getClickPopUp = (item,mapPoint)=>{
  const popOption = {
            title: '定位',
            relationId: 'poi',
            visible: true,
            screenX: item.x,
            screenY: item.y,
            mapX: item.longitude,
            mapY: item.latitude,
            values: [
                {
                   label: '地址',
                    value: item.address
                },
                {
                    label: '经度',
                    value: item.longitude,
                },
                {
                    label: '纬度',
                    value: item.latitude,
                },
                {
                    label: 'X',
                    value: mapPoint.x
                },
                {
                    label: 'Y',
                    value: mapPoint.y
                },
            ]
  }
  return  popOption
}

//地块弹出框数据
const getLandPopUp = (item)=>{
  const popOption = {
            title: item.farmLandNo,
            relationId: 'poi',
            visible: true,
            screenX: item.x,
            screenY: item.y,
            mapX: item.longitude,
            mapY: item.latitude,
            values: [
                {
                   label: '地块名称',
                    value: item.farmLandName
                },
                {
                    label: '地块面积',
                    value: item.mapAreaSize+'亩',
                },
                {
                    label: '地块类型',
                    value: item.landTypeName,
                },
                {
                    label: '作物类型',
                    value: '种植'
                },
            ]
  }
  return  popOption
}

//搜索经纬度
const locationQuery =async (item)=>{
    if(item.editType){
      openPopUpType.value = true
    }
   if(!tempLayer){
    tempLayer = new GraphicsLayer({ id: 'tempLayer' });
    mapView.map.add(tempLayer);
  }else{
    const graphics = tempLayer.graphics.items.filter((graphic) => graphic.attributes.id == 'click-pop-up');
      graphics.forEach((graphic) => {
        tempLayer.remove(graphic);
      });
  }
  mapView.goTo({ center: [Number(item.longitude), Number(item.latitude)]})
  if(item.zoomType){
    mapView.zoom = 18;
  }
  const pointGraphic = new Graphic({
    geometry: {
      type: "point",
      longitude:Number(item.longitude),
      latitude:  Number(item.latitude)
    },
    symbol: {
      type: 'picture-marker',
      url: locationIcon,
      width: 30,
      height: 40,
    },
    attributes: {
      id: 'click-pop-up'
    }
  })
  const mapPoint = new Point({longitude: item.longitude,latitude: item.latitude, spatialReference: spwkId});
  const { x, y } = mapView.toScreen(mapPoint)
  //开启右下角获取坐标点时 item.search 搜索框点击定位
  if(openPopUpType.value || item.search){
    tempLayer.add(pointGraphic);
    const res = await getLocationInfo(`${item.latitude},${item.longitude}`)
    emit('getLocation', res)
    if(res){
      item.address = res.formatted_addresses.recommend
      popUpData.value = getClickPopUp(item,mapPoint)
    }
  }else{
    popUpData.value = getLandPopUp(item)
  }
}

//监听打开或关闭点击获取经纬度定位
const changeOpenType =(type)=>{
  openPopUpType.value = type
  if(!type && tempLayer){
    tempLayer.removeAll()
    popUpData.value.visible=type
  }
}

//地块管理
const drawLandList = (dataList)=>{
  if(!graphicsLayer){
    graphicsLayer = new GraphicsLayer({ id: 'land-plot' });
  }else{
    graphicsLayer.removeAll()
  }
  dataList.forEach((item,index)=>{
        const geo = WktToPolygon(item.geom, { wkid: 4326 });
        const newGeo = webMercatorUtils.geographicToWebMercator(geo)
        const polygon = new Graphic({
          geometry: newGeo,
          symbol: {
            type: 'simple-fill',
            color:  [43, 129, 212, 0.1],
            outline: {
            color:  [43, 129, 212, 1],
            width: 1
            }
          },
          attributes: {
            class: 'land-popup',
            id:item.farmLandId,
            ...item
          }
          })
          graphicsLayer.add(polygon);

          const textAreaStyle = {
                type: "text", 
              color: [255, 255, 255],
              haloColor: [0, 0, 0],
              haloSize: "1px",
              text: "",
              xoffset: 0,
              yoffset: 0,
              cursor: 'pointer',
              font: {
                size: 10,
                family: "PingFangSC",
                weight: "bold"
              }
          }
          const AreaGeometry = polygon.geometry.extent.center
          const areaValue = item.mapAreaSize
          let result = "";
          for (let i = 0, len = item.farmLandName.length; i < len; i++) {
            if (i % 8 === 0 && i != 0) result += '\n';
            result += item.farmLandName[i];
            }
          textAreaStyle.text = `${result}\n${areaValue}亩`
          const textAttr = { ...item, type: 'text' }
          const textAreaGraphic = new Graphic({
              geometry: AreaGeometry,
              symbol: textAreaStyle,
              attributes: textAttr,
              visible: currentZoom>14?true:false
            })
            graphicsLayer.add(textAreaGraphic)
  })
    //画边形
    mapView.map.add(graphicsLayer)
    //定位
    setTimeout(() => {
      mapView.goTo(graphicsLayer.graphics.items);
    }, 500);
}

const removeHandStyle =()=>{
  if(drawEnable.value){
    mapView.container.classList.add('draw-enable')
  }else{
    mapView.container.classList.remove('draw-enable')
  }
}
const addMapLand=()=>{
  drawEnable.value= true
  if(!drawProProcessLayer){
    drawProProcessLayer = new GraphicsLayer({ id: 'draw-pro' })
    mapView.map.add(drawProProcessLayer)
  }
  removeHandStyle()
}

//画点
const drawAddVetexPro =()=>{
    const pointGraphic =[]
    toRaw(drwaPointList.value).forEach((item)=>{
        pointGraphic.push(
          new Graphic({
          geometry: {
            type: "point",
            longitude:item.longitude,
            latitude: item.latitude
          },
          symbol: {
            type: "simple-marker",
              color: [255, 255, 255],
              outline: {
                color: [255, 255, 255,0.5],
                width: 6
              }
          }
        })
        )
      })
      drawProProcessLayer.addMany(pointGraphic)
}

    //绘制点位
const drawAddProcessPro =(item)=>{
      const point = item || mapView.center
      drawProProcessLayer?.graphics.removeAll()
      const vetexPoint = webMercatorUtils.geographicToWebMercator(new Point({
        latitude: point.latitude,
        longitude: point.longitude,
      }))
      let drwaList = toRaw(drwaPointList.value)
      const currentIndex =drwaList.length || 0
      if(currentIndex<1){return}
      const lastGeometry = {
        x:drwaList[drwaList.length-1].x,
        y:drwaList[drwaList.length-1].y
      }
      let allowDraw = true
      //@ts-ignore
      const paths = [[lastGeometry.x, lastGeometry.y], [vetexPoint.x, vetexPoint.y]]

      const lineGeometry = new Polyline({
        paths,
        spatialReference: mapView.spatialReference
      })

      const lineStyle = { 
        type: "simple-line",
        color: [255, 255, 255],
        width: 2,
        style: "solid"
      }
      const textStyle = { 
          type: "text",  // autocasts as new TextSymbol()
          color: [255, 255, 255],
          haloColor: [0, 0, 0],
          haloSize: "1px",
          text: "",
          xoffset: 3,
          yoffset: 3,
          font: {
            size: 14,
            // family: "PingFangSC",
            weight: "bold"
          }
      }
        lineStyle.width = 2
        lineStyle.style = 'dash-dot'
        lineStyle.color = [255, 255, 255, 0.7]
        textStyle.color = [255, 255, 255, 0.7]
        
        const lineGraphic = new Graphic({
          geometry: lineGeometry,
          symbol: lineStyle,
      }) 

      const lengthValue = geometryEngine.geodesicLength(lineGeometry, 'meters');
      const lengthGeometry = lineGeometry.extent.center
      textStyle.text = lengthValue.toFixed(1) + '米'
      const textLengthGraphic = new Graphic({
        geometry: lengthGeometry,
        symbol: textStyle,
      })
      if(currentIndex>1){
        const rings = []
        drwaList.forEach(item => {
          //@ts-ignore
          rings.push([item.x, item.y])
        })
        rings.push([vetexPoint.x, vetexPoint.y])
        rings.push(rings[0])
        const polygonGeometry = new Polygon({
          rings,
          spatialReference: mapView.spatialReference
        })
        const polygonSymbol = { 
          type: "simple-fill",
              color: [0, 0, 0, 0.5],
              outline: {
                color: [0, 0, 0, 0],
                width: 1
              }
          }
        const textAreaStyle = { 
          type: "text",  // autocasts as new TextSymbol()
          color: [255, 255, 255],
          haloColor: [0, 0, 0],
          haloSize: "1px",
          text: "",
          xoffset: 3,
          yoffset: 3,
          font: {
            size: 14,
            // family: "PingFangSC",
            weight: "bold"
          }
          }

          polygonSymbol.outline.color = [0, 0, 0]
          textAreaStyle.color = [255, 255, 255, 0.7]
        
          const AreaGeometry = polygonGeometry.extent.center
          const areaValue =  geometryEngine.geodesicArea(polygonGeometry, 'square-meters');
          const muFn = 666.6667;
          const formatArea = Math.abs(areaValue) / muFn;
          textAreaStyle.text = Math.abs(formatArea).toFixed(1) + '亩'

          const textAreaGraphic = new Graphic({
          geometry: AreaGeometry,
          symbol: textAreaStyle,
        })
        const polygonGraphic = new Graphic({
          geometry: polygonGeometry,
          symbol: polygonSymbol,
        })
        
        drawProProcessLayer.addMany([polygonGraphic, lineGraphic, textAreaGraphic, textLengthGraphic])
      }else{
        drawProProcessLayer.addMany([lineGraphic, textLengthGraphic])
      }
      drawAddVetexPro()
  }

  
//完成闭合
const drawDonePro =()=>{
         drawEnable.value= false
         removeHandStyle()
          const rings = []
         toRaw(drwaPointList.value).forEach(item => {
           //@ts-ignore
          rings.push([item.x, item.y])
          })
          const polygonGeometry = new Polygon({
            rings,
            spatialReference: mapView.spatialReference
          })
          drawProProcessLayer?.removeAll()
          //面积
          const area = geometryEngine.geodesicArea(polygonGeometry, 'square-meters')||0;
          //周长
          const lengthValue = geometryEngine.geodesicLength(polygonGeometry, 'meters');
        // const transformRes = transformMercatorTo84(polygonGeometry)

          const AreaGeometry = polygonGeometry.extent.center
          const polygonSymbol = {   
            type: "simple-fill",
          color: [0, 0, 0, 0.5],
          outline: {
            color: [0, 0, 0, 0],
            width: 1
          } }
          const textAreaStyle = { 
              type: "text", 
              color: [255, 255, 255],
              haloColor: [0, 0, 0],
              haloSize: "1px",
              text: "",
              xoffset: 3,
              yoffset: 3,
              font: {
                size: 14,
                // family: "PingFangSC",
                weight: "bold"
              }
          }
          polygonSymbol.color = [43, 129, 212, 0.3]
          polygonSymbol.outline.color = [43, 129, 212, 1]
          const muFn = 666.6667;
          const formatArea = Math.abs(area || 0) / muFn;
          textAreaStyle.text = Math.abs(formatArea).toFixed(1) + '亩'

          const polygonGraphic = new Graphic({
            geometry: polygonGeometry,
            symbol: polygonSymbol,
            attributes: { type: 'draw-result-polygon' }
          })
          const textAreaGraphic = new Graphic({
            geometry: AreaGeometry,
            symbol: textAreaStyle,
            attributes: { type: 'draw-result-text' }
          })
          drawProProcessLayer.addMany([polygonGraphic, textAreaGraphic])
          drawEditPro(polygonGraphic)
          mapView.goTo(polygonGraphic)

}

const PolygonToWKT=(geometry)=> {
    var wkt = [];
    var rings = geometry.rings;
    for (var i in rings) {
      var ring = rings[i];
      for (var j in ring) {
        var p = ring[j];
        wkt.push(p.join(' '));
      }
    }
    return 'POLYGON ((' + wkt.join(',') + '))';
  }

      /**
 * 绘制|编辑完成辅助函数
 * @param polygonGeometry 图形
 */
 const drawDoneHandlerPro=(polygonGeometry)=> {
    let res = {}
    if (polygonGeometry) {
      const areaValue = geometryEngine.geodesicArea(polygonGeometry, 'square-meters');
      const lengthValue = geometryEngine.geodesicLength(polygonGeometry, 'meters');
      const transformRes = webMercatorUtils.webMercatorToGeographic(polygonGeometry)
      res = {
        centerX: transformRes.extent.center.x,
        centerY: transformRes.extent.center.y,
        area: Math.abs(areaValue),
        length: Math.abs(lengthValue),
        wktStr:PolygonToWKT(transformRes),
        drawStatus: 'complete'
      }
    }
    return res
  }

//编辑
const drawEditPro=(graphic)=> {
    //@ts-ignore
    if (!graphic) graphic = drawProProcessLayer.graphics.items.find(item => item.attributes.type == 'draw-result-polygon')
     sketch = new SketchViewModel({
      view: mapView,
      layer: drawProProcessLayer,
      defaultUpdateOptions: {
        tool: 'reshape',
        toggleToolOnClick: false,
        highlightOptions: {
          enabled: false
        }
      }
    });
    sketch.update(graphic, {
      tool: 'reshape',
      toggleToolOnClick: false
    });
    sketch.on('update', (event) => {
      if (event.state == 'start') {
        resetSketchVetexStyle()
      }else if (event.state == 'active') {
          resetSketchVetexStyle()
        if (event.toolEventInfo) {
          if (event.toolEventInfo.type === "move-start") {
            sketch.undo()
          }
          else if (event.toolEventInfo.type === "reshape-stop") {
            drawEditDonePro(event.graphics[0])
          }
        }
      }
      else {
        sketch.update(graphic)
        window.setTimeout(() => {
          resetSketchVetexStyle()
        }, 500)
      }
    });
    sketch.on('undo', event => {
      window.setTimeout(() => {
        resetSketchVetexStyle()
      }, 500)
      console.log('-----------编辑完成')

      // this.drawEditDonePro(event.graphics[0])
    })
    // this.sketchViewModel = sketchViewModel 
    }
    
  const resetSketchVetexStyle=()=> {
    const layers = mapView.map.layers.items.filter(item => item.title == 'SVM Internal')
    layers.forEach(layer => {
      layer.graphics.items.forEach(item => {
        item.symbol = {
          type: "simple-marker",
            color: [255, 255, 255],
            outline: {
              color: [255, 255, 255,0.5],
              width: 6
            }
        }
      })
    })
  }

  const  drawEditDonePro=(polygonGraphic)=> {
    if (!polygonGraphic) return
    // this.drawInfoChange({ drawEnable: false })
    const polygonGeometry = polygonGraphic.geometry
    // const allowDraw = this.drawOverlapValid(polygonGeometry)
    // if (!allowDraw) {
    //   createMessage.error('绘制面与已有地块重叠！')
    //   this.drawUndoPro()
    //   return
    // }
    const info = drawDoneHandlerPro(polygonGeometry)
    // this.drawInfoChange(info)
    // this.drawInfoCommit(EventTypes.DRAW_COMPLETE_PRO)
    const muFn = 666.6667;
    const formatArea = Math.abs(info.area || 0) / muFn;
    //@ts-ignore
    const textAreaGraphic = drawProProcessLayer?.graphics.items.find(item => item.attributes.type == 'draw-result-text')
    const textAreaStyle = { 
      type: "text",  // autocasts as new TextSymbol()
        color: [255, 255, 255],
        haloColor: [0, 0, 0],
        haloSize: "1px",
        text: "",
        xoffset: 3,
        yoffset: 3,
        font: {
          size: 14,
          weight: "bold"
        }
     }
    textAreaStyle.text = Math.abs(formatArea).toFixed(1) + '亩'
    textAreaGraphic.symbol = textAreaStyle
    mapView.goTo(polygonGraphic)
  }
  
  const openClick =()=>{
    openPopUpType.value = true
  }

//   const getScreenDistance=(p1, p2)=> {
//     const dx = p2.x - p1.x;
//     const dy = p2.y - p1.y;
//     return Math.sqrt(dx * dx + dy * dy);
// }
// let oldMartkPointList =[]
//   //添加地标icon
// const addLandmarks =async (lists)=>{   
//   let pointGraphic =[]
//     if(addLandMarktempLayer){
//       addLandMarktempLayer.removeAll()
//     }
//     addLandMarktempLayer = new GraphicsLayer({ id: 'landMarktempLayer' });
//     mapView.map.add(addLandMarktempLayer);
//     lists.forEach((item)=>{
//       pointGraphic.push(new Graphic({
//           visible: currentZoom>12?true:false,
//           geometry: {
//             type: "point",
//             longitude:Number(item.locationLongitude),
//             latitude:  Number(item.locationLatitude)
//           },
//           symbol: {
//             type: 'picture-marker',
//             url: locationIcon,
//             width: 30,
//             height: 40,
//           },
//           attributes: {
//             id: 'click-landMark'
//           }
//         })) 
//     })
//     addLandMarktempLayer.addMany(pointGraphic);
//     oldMartkPointList = pointGraphic
//     oldLandMarkList.value = lists
//     showLandMarkBox(currentZoom)
// }

// const showLandMarkBox = (currentZoom)=>{
//  let newLists =[]
//  if (oldMartkPointList){
//     oldMartkPointList.forEach((item)=>{
//       item.visible =currentZoom>12?true:false
//     })
// }
//  oldLandMarkList.value.forEach((item)=>{
//       const { farmId, farmNo, locationLongitude, locationLatitude, locationDetail, farmAreaTotal, companyName, companyId, farmName, contacts, contactsPhone } = item
//       const mapPoint = {
//             x: Number(locationLongitude),
//             y: Number(locationLatitude),
//             spatialReference: {
//                 wkid: 4326
//             }
//         };
//       const screenCoord  = mapView.toScreen(mapPoint)
//       if(screenCoord){
//         const originData = {
//             title: farmName,
//             farmAreaTotal: Number(farmAreaTotal),
//             farmNum: 1,
//             mapX: Number(locationLongitude),
//             mapY: Number(locationLatitude),
//             screenX: screenCoord.x,
//             screenY: screenCoord.y,
//         }
//         newLists.push(originData)
//       }
//      })

//         const clusterList = []
//         const maxPix = 50
//         const pointList= Object.assign([], newLists)
//         pointList.forEach((item) => {
//             const mapPoint = {
//                 x: item.mapX,
//                 y: item.mapY,
//                 spatialReference: {
//                     wkid: 4326
//                 }
//             };
//             const screenPoint1 = mapView.toScreen(mapPoint)
//             item.screenX = screenPoint1.x
//             item.screenY = screenPoint1.y
//             item.visible =currentZoom>12?false:true
//             let isJoin = false
//             clusterList.forEach(oldItem => {
//                 const screenPoint2 = {
//                     x: oldItem.screenX,
//                     y: oldItem.screenY
//                 }
//                 const distance = getScreenDistance(screenPoint1, screenPoint2)
//                 if (distance <= maxPix) {
//                     isJoin = true
//                     oldItem.farmNum = Number(oldItem.farmNum) + 1
//                     oldItem.farmAreaTotal = Number(oldItem.farmAreaTotal.toFixed(1)) + Number(item.farmAreaTotal.toFixed(1))
//                 }
//             })
//             if (!isJoin) {
//                 clusterList.push(Object.assign({}, item))
//             }
//         })
//         landMarkList.value = clusterList
// }
defineExpose({drawLandList,locationQuery,addMapLand,drawDonePro,openClick})
</script>

